<template>
	<view>
		<view class="mask" :class="{ maskShow: showPicker }" @click="hide" @click.stop.prevent @touchmove.stop.prevent
			catchtouchmove="true"></view>
		<view class="cpicker-content" :class="{ cpickerShow: showPicker }">
			<view class="city-head" @click.stop.prevent @touchmove.stop.prevent catchtouchmove="true">
				<view class="city-head-title">{{ headTitle }}</view>
				<icon type="clear" v-if="clearRightIcon" class="clearRightIcon" size="20" color="#cccccc" @click="hide">
				</icon>
			</view>
			<scroll-view id="nav-bar" class="nav-bar" scroll-x="true" scroll-with-animation="true"
				:scroll-left="scrollLeft">
				<view v-for="(item, index) in tabbars" class="nav-item" :key="index" :id="'tab' + index"
					@click="changeTab(index)" :class="{ current: index === tabCurrentIndex }"><text
						class="nav-bar-title">{{ item.localName }}</text></view>
			</scroll-view>
			<view class="city_content">
				<scroll-view class="panel-scroll-box" :scroll-y="enableScroll" :cscrollTop="scrollTop"
					:current="tabCurrentIndex" :scroll-top="scrollTop">
					<block v-for="(item, index) in tabbars[tabCurrentIndex].children" :key="index">
						<view class="flex-row-c-c" @click="changCity(tabCurrentIndex, item)">
							<text class="city-text"
								:class="{ color: tabbars[tabCurrentIndex].id == item.id }">{{ item.name }}</text>
							<icon type="success_no_circle" v-if="tabbars[tabCurrentIndex].id == item.id"
								:id="'show' + tabCurrentIndex" class="ischeck" size="14" :color="$lightColor"></icon>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	let windowWidth = 0
	import {
		getRegionsById
	} from "@/api/common.js";
	export default {
		name: "UniCityNvue",
		props: {
			pickerState: {
				//标题
				type: String,
				default: "1",
			},
			headTitle: {
				//标题
				type: String,
				default: "区域选择",
			},
			pickerSize: {
				// 使用多少个tab
				type: [String, String],
				default: "1",
			},
			provinceData: {
				// 默认的省市区id，如果不使用id的情况下则为[]；
				type: Array,
				default: function() {
					return [];
				},
			},
		},
		data() {
			return {
				clearRightIcon: true, //是否显示右侧关闭icon
				scrollLeft: 500, //顶部选项卡左滑距离
				scrollTop: 0, //默认滚动顶部为0
				enableScroll: true, //是否启用滚动
				tabCurrentIndex: 0, //当前选项卡索引
				tabbars: this.provinceData, //默认的省市区id
				pickersize: this.pickerSize, //多少个tab 推荐为4级 
				showPicker: false, //显示选取器
			};
		},
		methods: {

			/**
			 * 显示选择器
			 */
			show() {
				this.showPicker = true;
				if (this.tabbars[0].children.length == 0) {
					getRegionsById(0).then((res) => {
						this.tabbars[0].children = res.data.result;
					});
				}

				windowWidth = uni.getSystemInfoSync().windowWidth;
			},

			/**
			 * 关闭选择器
			 */
			hide() {
				if (this.pickerState + '' == '0') return
				this.showPicker = false;
			},

			/**
			 * tab切换
			 */
			changeTab(e) {
				let index = e;
				this.setScroll(index);
				//延迟300ms,等待swiper动画结束再修改tabbar
				this.tabCurrentIndex = index;
				setTimeout(() => {
					this.getScroll("show" + index);
				}, 10);
			},

			/**
			 * 获得元素的大小
			 */
			getElSize(id) {
				return new Promise((res, rej) => {
					let el = uni
						.createSelectorQuery()
						.in(this)
						.select("#" + id);
					el.fields({
							size: true,
							scrollOffset: true,
							rect: true,
						},
						(data) => {
							res(data);
						}
					).exec();
				});
			},

			/**
			 * 点击城市后回调
			 */
			async changCity(index, item) {
				if (this.tabbars[index].id != item.id) {
					this.tabbars[index].localName = item.name;
					this.tabbars[index].id = item.id;
					this.tabbars[index].adCode = item.adCode;
					this.tabbars[index].center = item.center;
					if (index < this.tabbars.length - 1) {
						this.tabbars.splice(index + 1, this.tabbars.length - index - 1);
					}
					if (this.tabbars.length < this.pickersize) {
						let data = await getRegionsById(item.id);
						// 当前选项级为最后一级时回调，将选中的数据返回
						if (data.data.result.length == 0) {
							this.hide();
						} else {
							// 将新的数据填充进下一级
							var current = {
								localName: "请选择",
								id: "",
								children: data.data.result,
							};
							this.tabbars.push(current);
							this.tabCurrentIndex++;

							// 当前距离重新为最上面
							this.scrollTop = 0;
						}
						this.$emit("funcValue", this.tabbars);
					} else {
						this.$emit("funcValue", this.tabbars);
						this.hide();
					}
				}
			},

			/**
			 * 获取当前tab中滚动的距离
			 */
			async setScroll(index) {
				let width = 0;
				let nowWidth = 0;
				for (let i = 0; i <= index; i++) {
					let result = await this.getElSize("tab" + i);
					width += result.width;
					if (i === index) {
						nowWidth = result.width;
					}
				}
				if (width + nowWidth > windowWidth) {
					this.scrollLeft = width + nowWidth;
				} else {
					this.scrollLeft = 0;
				}
			},

			/**
			 * 计算当前的滚动距离
			 */
			getScroll(id) {
				uni
					.createSelectorQuery()
					.in(this)
					.select(".panel-scroll-box")
					.boundingClientRect((data) => {
						uni
							.createSelectorQuery()
							.in(this)
							.select("#" + id)
							.boundingClientRect((res) => {
								if (res != undefined && res != null && res != "") {
									this.scrollTop = res.top - data.top;
								}
							})
							.exec();
					})
					.exec();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.address-position {
		.mask {
			visibility: hidden !important;
		}

		.cpicker-content {
			position: static !important;
		}
	}

	.mask {
		visibility: hidden;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 1000;
		background: rgba(0, 0, 0, 0.6);
		opacity: 0;
		transition: all 0.3s ease;
	}

	.maskShow {
		visibility: visible;
		opacity: 1;
	}

	.cpicker-content {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #ffffff;
		transition: all 0.3s ease;
		transform: translateY(100%);
		z-index: 3000;
	}

	.cpickerShow {
		transform: translateY(0);
	}

	.city-head {
		width: 750rpx;
		height: 88rpx;
		flex-direction: column;
		border-bottom-width: 1px;
		border-bottom-color: #f4f4f4;
		border-bottom-style: solid;
	}

	.city-head-title {
		font-size: 15px;
		line-height: 88rpx;
		align-items: center;
		/* #ifndef APP-NVUE */
		text-align: center;
		/* #endif */
	}

	.clearRightIcon {
		position: absolute;
		right: 15px;
		top: 12px;
		font-size: 10px;
		color: #bebebe;
	}

	.nav-bar {
		position: relative;
		z-index: 10;
		height: 90rpx;
		white-space: nowrap;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
		background-color: #fff;
	}

	.nav-item {
		/* #ifndef APP-NVUE */
		display: inline-flex !important;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex-direction: row !important;
		/* #endif */
		width: 170rpx;
		padding: 7px 0px;
		line-height: 26px;
		align-items: center;
		justify-content: center;
		color: #303133;
		position: relative;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.nav-bar-title {
		font-size: 12px;
	}

	.current {
		color: $aider-light-color;
		border-color: $aider-light-color;
		border-bottom-width: 4rpx;
		border-bottom-style: solid;
	}

	.current:after {
		width: 50%;
	}

	.panel-scroll-box {
		height: 516rpx;
		margin-top: 8px;
	}

	.flex-row-c-c {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex-direction: row;
		/* #endif */
		padding-left: 25px;
	}

	.city-text {
		/* #ifdef APP-NVUE */
		flex-direction: row;
		/* #endif */
		height: 35px;
		line-height: 35px;
		font-size: 13px;
	}

	.hide {
		opacity: 0;
	}

	.ischeck {
		/* #ifndef APP-NVUE */
		display: inline-flex !important;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex-direction: column;
		/* #endif */
		margin-right: 5px;
		vertical-align: middle;
	}

	.color {
		color: $light-color;
	}

	icon {
		margin-left: 40rpx;
	}
</style>
